"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/17
 */
import * as React from 'react'
import {MyTabBarProps} from "./index";
import {commonStyles} from "../assets/styles/common";
import {myTabBarStyles} from "../assets/styles/tabBar";
import MyText from "./MyText";
import Colors from "../assets/styles/Colors";
import Line from "./Line";
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../constant";

const {View, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');

class MyTabBar extends React.Component<MyTabBarProps, any> {


    static defaultProps = {
        currentTab:0
    };

    lineWidth:number;
    offset:number;
    constructor(props: MyTabBarProps, context: any) {
        super(props, context);

        this.lineWidth=SCREEN_WIDTH/props.tabs.length*0.8;
        this.offset = (SCREEN_WIDTH/props.tabs.length - this.lineWidth)/2;
    }

    _changeTabs =(currentIndex)=>{
      if(this.props.onChange){
          this.props.onChange({index:currentIndex,text:this.props.tabs[currentIndex]})
      }
    };
    render() {
        return (
            <View style={[commonStyles.flexRow, myTabBarStyles.container,commonStyles.relative]}>
                {this.props.tabs.map((item, index) => (
                    <View key={index} style={[commonStyles.flex1, commonStyles.flexRow,{alignItems:'center'}]}>
                        <TouchableOpacity key={index} style={[commonStyles.flex1, commonStyles.centerVH]} onPress={this._changeTabs.bind(this,index)}>
                            <MyText
                                color={index === this.props.currentTab ? Colors.Primary : Colors.SubTitle}>{item}</MyText>
                        </TouchableOpacity>
                        {index === this.props.tabs.length-1?null:<Line width={1} height={'50%'}/>}

                    </View>
                ))}
                <Line width={this.lineWidth}
                      height={1} color={Colors.Primary}
                      style={[commonStyles.absolute,{bottom:0,
                          left:SCREEN_WIDTH/this.props.tabs.length * this.props.currentTab+this.offset}]}/>
            </View>
        );
    }
}


export default MyTabBar;